<template>
  <a-descriptions :column="{ lg: 2, md: 2, sm: 1, xs: 1 }" bordered size="small" layout="vertical">
    <a-descriptions-item label="商品名">{{ c_name }}</a-descriptions-item>
    <a-descriptions-item label="总价">{{ singleGoodtotalPrice }}</a-descriptions-item>
    <a-descriptions-item label="数量">{{ g_c_num }}</a-descriptions-item>
    <a-descriptions-item label="供货日期">{{ g_provide_date_formatted }}</a-descriptions-item>
  </a-descriptions>
</template>

<script lang='ts' setup>
import { toRefs, defineProps, computed } from 'vue'
import type { PropType } from 'vue'
import type { GoodDetail } from '@/interface/good';
import { formatStrTime } from '@/utils/fomatTime'
const props = defineProps({
  goodDetail: {
    type: Object as PropType<GoodDetail>,
    default: () => { }
  }
})
console.log(props.goodDetail);
const { c_price, c_name, g_provide_date, g_c_num } = toRefs(props.goodDetail)
const format = 'YYYY-MM-DD'
const g_provide_date_formatted = computed(() => formatStrTime(g_provide_date.value, format))
const singleGoodtotalPrice = computed(() => c_price.value * g_c_num.value)

</script>
<style scoped>
</style>